<template>
  <div class="father">
    <h2>父组件</h2>
    <h4>{{ message }}</h4>
    <h4>{{ message2 }}</h4>
    <!-- v-model用在html标签上，可以实现双向绑定 -->
    <!-- <input type="text" v-model="message" /> -->
    <!-- v-model的本质是 :value 和 @input 的语法糖 -->
    <!-- value 是绑定在input标签上的属性，input 是绑定在input标签上的事件 -->
    <!-- <input type="text" :value="message" @input="message = ($event.target as HTMLInputElement).value" /> -->

    <!-- v-model 用在自定义组件上，可以实现双向绑定 -->
    <!-- <JinInput v-model="message" /> -->
    <!--对比Vue2 :modelValue等价于:value，@update:modelValue等价于@input -->
    <!-- <JinInput :modelValue="message" @update:modelValue="message = $event" /> -->

    <!-- 修改modelValue的值 -->
    <JinInput v-model:myModelValue="message" v-model:myModelValue2="message2" />
  </div>
</template>

<script setup lang="ts">
import JinInput from './JinInput.vue'
import { ref } from 'vue'
const message = ref('默认message')
const message2 = ref('默认message2')
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>